<template>
  <div class="publish">
    <div class="publishT ajc">
      <p>发布信息</p>
    </div>
    <div class="publishInfo wn">
      <div>
        <p>
          <span>标题：</span>
          <span>
            <input type="text" placeholder="请输入标题" v-model="subdata.title"/>
          </span>
        </p>

        <p>
          <span>详细地址：</span>
          <span>
            <input type="text" placeholder="请输入您的详细地址" v-model="subdata.address" />
          </span>
        </p>

        <p>
          <span>联系人：</span>
          <span>
            <input type="text" placeholder="请输入联系人" v-model="subdata.name"/>
          </span>
        </p>

        <p>
          <span>电话号码：</span>
          <span>
            <input type="text" placeholder="请输入手机号" v-model="subdata.phone"/>
          </span>
        </p>
        <!-- <p class="bt code">
          <span>
            验证码：
            <input type="text" placeholder="请输入验证码" />
          </span>
          <span>获取验证码</span>
        </p>-->
      </div>
      <div>
        <p>
          <span>详情</span>
        </p>
        <textarea placeholder="请输入详情（如招工要求·工作内容·工资待遇·结款方式/周期等）,有助您更快,更准确的招到更好的工人~" v-model="subdata.msg"></textarea>
      </div>
    </div>
    <div class="uploadImg wn">
      <div class="bt ac">
        <p class="ac">
          <img src="../assets/zx.png" />
          <span>上传图片</span>
        </p>
        <p>
          <img src="../assets/right.png" />
        </p>
      </div>
      <div class="upload-img">
        <van-uploader
                :after-read="uploadPublish"
                v-model="fileList"
                multiple
                :max-count="5"
        />
      </div>
      <div class="jc">
        <p>可上传办公环境，工程合同，承包合同等</p>
      </div>
    </div>
    <div class="publish-btn">
      <button @click="subPub">立即发布</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      subdata:{
        "title":'',
        "province_id":'',
        "county_id":'',
        "city_id":'',
        "address":'',
        "name":'',
        "phone":'',
        "msg":'',
        "images[]":''
      },
      cityList:[],
      pageindex:1
    };
  },
  created() {
    this.getaddress()
  },
  methods: {
    uploadPublish() {
      console.log(this.fileList)
    },
    subPub(){
      this.$axios({
        url:'decoration/release?title=' + this.subdata.title + '&province_id=' + this.subdata.province_id + '&county_id=' + this.subdata.county_id + '&city_id=' + this.subdata.city_id + '&address=' + this.subdata.address + '&name=' + this.subdata.name + '&phone=' + this.subdata.name + '&msg=' + this.subdata.msg + '&images[]=' + this.subdata["images[]"],
        method:'post'
      }).then(res => {
        if (res.data.code === 200) {
          this.$toast('发布成功')
        } else {
          this.$toast(res.data.msg)
        }
      })
    },
    // 获取地址列表
    getaddress(){
      this.$axios({
        url:'address/city?page='+this.pageindex,
      }).then(res=>{
        console.log(res)
        this.cityList = res.data.data
      })
    }
  }
};
</script>

<style lang="less">
  .publish{
    margin-bottom: 6rem;
  }
  .publish-btn{
    margin-top: 15px;
    text-align: center;
    button{
      border: none;
      outline: none;
      background-color: #f54822;
      color: #fff;
      width: 100px;
      height: 30px;
      border-radius: 5px;
    }
  }
.publishT {
  font-size: 16px;
  padding: 10px 0;
  background: linear-gradient(0deg, #e91a0e 0%, #f54822 100%),
    linear-gradient(0deg, #e40805 0%, #e40a07 100%);
  p {
    font-size: 16px;
    color: #fff;
  }
}
.publishInfo {
  border-radius: 5px;
  margin-top: 10px;
  background: #fff;
  box-shadow: 2px 2px 1px #ccc;
  div:first-child {
    input {
      border: 0;
      outline: 0;
      width: 60%;
    }
    p {
      padding: 13px 7px;
      border-bottom: 1px solid #dcdcdc;
      span {
        font-size: 18px;
      }
    }
  }
  div:last-child {
    padding: 10px 7px;
    span {
      background-image: linear-gradient(0deg, #1681e4 0%, #4a92f8 100%);
      border-radius: 5px;
      padding: 2px 7px;
      color: #fff;
    }
    textarea {
      width: 98%;
      margin: 0 auto;
      margin-top: 10px;
      border-radius: 5px;
      height: 6.4rem;
      outline: 0;
      padding-left: 5px;
    }
  }
}
.code {
  span:last-child {
    font-size: 15px !important;
    color: #fdfdfd;
    padding: 5px;
    background-image: linear-gradient(0deg, #ea1d0f 0%, #f54621 100%);
    border-radius: 5px;
    width: 24%;
  }
}
.uploadImg {
  border-radius: 5px 15px;
  margin-top: 10px;
  background: #fff;
  box-shadow: 2px 2px 1px #ccc;
  overflow: hidden;
  .upload-img {
    margin: 5px;
    background-color: #fff;
  }
  >div:first-child {
    padding: 7px;
    border-bottom: 1px solid #ccc;
    span {
      font-size: 16px;
      font-weight: 550;
    }
    p:first-child {
      img:first-child {
        width: 1.7rem;
        height: 1.4rem;
      }
    }
    p:last-child {
      img:last-child {
        width: 0.8rem;
        height: 1rem;
      }
    }
  }
  div:last-child {
    padding-top: 5px;
    /*height: 7.5rem;*/
  }
}
</style>